<template>
  <div class="container flexs flex_between">
    <div class="permanageLf">
      <div class="maerMange">
        <div class="navTT f16 fw">表面要求</div>
        <!-- 基础数据所有分组       -->
        <div class="materielList">
          <ul>
              <li
               v-for="(item,index) in allMaterielClass"
                :key="item.dictionaryID"
                class="flex flex_between"
                :class="classIndex === index? 'on':''"
                @click="changeMaterClass(item,index)"
              >
                <div>
                  <i class="iconfont folderIco mr5 f22" style="color: #83A0FF;" /> {{ item.objectName }}
                  <!-- ({{ item.speciesQuantity }}) -->
                </div>
              </li>
          </ul>
        </div>
        <div v-if="allMaterielClass.length==0" class="p16">
          <el-skeleton :rows="10" animated />
        </div>
      </div>
    </div>
    <div class="permangeRg flex1 flex flex_column">
      <!-- <div class="mainTT">{{ subTitle }}({{ total || 0 }})</div> -->
      <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getAllMaterils" @newAdd="selectCurrentRow">
      </na-table>
      <SelectCraftlist ref="selectCrafList" :per-visible.sync="showCraft" :select-code="backupsGroupCode" @refuseLists="refuseListsAll" />
      <!-- 搜索     -->
      <!-- <div class="btnCon flex flex_between">
        <div class="plop">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="mr5"
            size="small"
            @click="showCraft = true"
             v-permission="'MenuCode2-6-1-1'"
          >选择工艺</el-button>
          <SelectCraftlist ref="selectCrafList" :per-visible.sync="showCraft" :select-code="backupsGroupCode" @refuseLists="refuseListsAll" />
        </div>
        <div class="search">
          <el-input
            v-model="search.likeWords"
            placeholder="输入关键字"
            size="small"
            @keyup.enter.native="getAllMaterils"
          >
            <el-button
              slot="append"
              :loading="searchLoading"
              type="primary"
              icon="el-icon-search"
              :disabled="searchLoading"
              element-loading-spinner="el-icon-loading"
              @click="getAllMaterils"
            >
              搜索
            </el-button>
          </el-input>
        </div>
      </div> -->
      <!--table板块-->
      <!-- <div ref="tableCon" class="tableCon expandBox">
        <el-table
          v-show="tableHead.length>0"
          id="emtable"
          ref="multipleTable"
          v-loading="searchLoading"
          :data="allMaterirls"
          :height="tableHeight || 'auto'"
          border
          fit
          style="width: 100%"
          @header-dragend="surverWidth"
        >
          <template v-for="(fruit,index) in tableHead">
            <el-table-column
              v-if="fruit.visible"
              :key="index"
              :label="fruit.columnName"
              :min-width="fruit.columnWidth || 90"
              :prop="fruit.columnCode"
              show-overflow-tooltip
              :fixed="fruit.isFloat?'left':false"
            />
          </template>
          <el-table-column label="操作" width="70px" fixed="right" align="center">
            <template slot-scope="scope">
              <div>
                <el-popover
                  :ref="`popover-${scope.$index}`"
                  placement="bottom-end"
                  popper-class="tableOp"
                  width="160"
                  :popper-options="{
                    boundariesElement: 'opBox',
                    removeOnDestroy: true,
                  }"
                  trigger="click"
                >
                  <div class="operation">
                    <ul>
                      <li v-permission="'MenuCode2-6-1-2'" @click="deleteRow(scope.row)">删除</li>
                    </ul>
                  </div>
                  <div slot="reference" class="opBox pointer">
                    <span class="el-icon-more c_3F61F1" />
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="tableHead.length==0" class="p16">
          <el-skeleton :rows="6" animated />
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { arraySort } from '@/utils'
import HeadSeting from '@/components/HeadSeting'
import SelectCraftlist from '@/components/selectCraft'
import { mapGetters } from 'vuex'
import naTable from "@/components/naTable";

export default {
  name: 'SurfaceRequirements',
  components: { HeadSeting, SelectCraftlist,naTable },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      ops: 'add', // 基础数据操作、新建，修改，查看
      subTitle: '生产设备',
      showCraft: false,
      tableHeight: null, // 表格最大高度
      addMaterirlClass: false, // 新建基础数据分组弹框是否打开
      editMaterirlClass: false, // 编辑基础数据分组弹框是否打开
      addMaterClassLoading: false, // 新建基础数据分组加载效果
      classIndex: 0, // 选中分组索引
      searchLoading: false, // 搜索加载效果
      allMaterirls: [], // 全部基础数据数据列表
      allMaterielClass: [], // 所有基础数据分组
      dicValueState: null,
      // 基础数据分组表单
      materClassForm: {
        dictionaryName: ''
      },
      backupsGroupCode: '',
      // 新建基础数据表单
      materForm: {
        displayValue: '',
        code: '',
        dicValueSort: 1000,
        dicValueDesc: ''
      },
      // 基础数据搜索条件
      search: {
        likeWords: '',
        pageIndex: 1,
	      pageSize: 1000,
        surfaceRequireNo: ''
      },

      tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'srCraftMapID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          addTitle:'选择工艺',
          addPermission: 'MenuCode2-6-1-1', //新建按钮权限
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          //表格按钮
          operationBtn: [
            {
              title: '删除',
              methodsName: 'deleteRow',
              permission: "MenuCode2-6-1-2",
            },
            
          ],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        },

      total: 0, // 基础数据总条数
      tableHead: [], // 基础数据表格表头
      materFormRules: {
        displayValue: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 所有基础数据列表数据
    this.getMaterielClass()
    // 基础数据表格得表头
    this.getTableHead()
  },
  mounted() {
  },
  updated() {
  },
  methods: {

    selectCurrentRow(){
      this.showCraft = true
    },

    // 选择工艺后刷新
    refuseListsAll(selectArr) {
      const _pushArr = []
      selectArr.forEach((item) => {
        _pushArr.push(item.code)
      })
      const _data = {
        surfaceRequireNo: this.backupsGroupCode,
        produceCraftNoList: _pushArr
      }
      this.$api.product
        .ExcuteSurfaceRequireCraftMapRelation(_data)
        .then((res) => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$refs.selectCrafList.isMarterdialog = false
          this.getAllMaterils()
        })
        .catch(() => {})
    },
    // 删除基础数据
    deleteRow(row) {
      const parmas = {
        srCraftMapID: row.srCraftMapID
      }
      this.$confirm('确定删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.product.RemoveSurfaceRequireCraftMap(parmas).then(() => {
          this.getAllMaterils()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {
        })
      }, 300)
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead]
        heads.forEach(item => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width
            return
          }
        })
        this.saveHead(heads)
      }, 100)
    },
    // 基础数据分组改变事件
    changeMaterClass(item, index) {
      this.classIndex = index
      this.search.surfaceRequireNo = item.objectCode
      this.backupsGroupCode = item.objectCode
      this.subTitle = item.objectName
      this.getAllMaterils()
    },
    // 清除所有查询条件
    Refresh() {
      this.search = this.$options.data().search
      this.getAllMaterils()
    },
    // 获取所有左边分组
    getMaterielClass() {
      this.$api.product.QuerySurfaceRequireDataList().then(res => {
        this.allMaterielClass = res
        this.subTitle = res[0].objectName
        this.search.surfaceRequireNo = res[0].objectCode
        this.backupsGroupCode = res[0].objectCode
        this.getAllMaterils()
      })
    },
    // 获取表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.surfacerequirecraftlist
      }
      this.$api.common.getAllTableHead(parmas).then(res => {
        res.sort(arraySort('columnSort'))
        this.tableData.thead = res;
        console.log(res)
      })
    },
    // 所有列表数据
    getAllMaterils() {
      const parmas = this.search
      this.searchLoading = true
      this.$api.product.GetPageSurfaceRequireCraftMapDataList(parmas).then(res => {
        this.total = res.list.length
        this.allMaterirls = res.list
        this.tableData.tbody = res.list;
            this.search.total = res.totalCount;
        this.allMaterirls.forEach((item)=>{
            for(let i in item){
              if(!item[i] && item[i] !== 0){
                item[i] = '--'
              }
            }
          })
        this.searchLoading = false
      }).catch(() => {
        this.searchLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.materielList {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}
.container {
  height: 100%;
}
.permangeRg {
  border: 1px solid #e6e6e6;
  background: #fff;
  margin-left: 10px;
  height: 100%;

  .mainTT {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 18px 16px;
    padding-bottom: 0;
  }
}
.permanageLf {
  width: 280px;
  height: 100%;
  border: 1px solid #e6e6e6;
  background: #fff;
  .kuOP {
    display: none;
  }
  li {
    padding: 9px 16px;
    cursor: pointer;

    &:hover {
      background: #3f61f110;
      color: #3f61f1;

      .kuOP {
        display: block !important;
      }
    }
  }
  li.on {
    background: #3f61f110;
    color: #3f61f1;
  }
  .allMateriel {
    line-height: 44px;
    padding-left: 16px;
    &:hover {
      background: #3f61f110;
      color: #3f61f1;
    }
  }
  .allMateriel.crt {
    background: #3f61f110;
    color: #3f61f1;
  }
}
.navTT {
  line-height: 22px;
  padding: 16px;
}

</style>
